<template>
    <view class="container l-class">
        <view class="text l-text-class" v-if="showInfo && textPosition === 'left'" :style="'color:' + (textColor ? textColor : '') + ';margin-right:' + interval + 'rpx'">
            {{ percentClone }}%
        </view>
        <view class="progress short" :style="'height:' + strokeWidth + 'rpx;'">
            <view class="slot" :style="'margin-left:' + marginLeft + 'rpx;margin-top:' + marginTop + 'rpx;'">
                <slot name="header"></slot>
            </view>
            <view
                :class="'percent ' + (activeColor ? '' : 'active') + ' l-active-class'"
                :style="
                    'width:' +
                    percentClone +
                    '%;height:' +
                    strokeWidth +
                    'rpx;border-radius:' +
                    borderRadius +
                    'rpx;' +
                    (activeColor ? 'background-color:' + activeColor + ';' : '')
                "
            ></view>
            <view
                class="background l-background-class"
                :style="'height:' + strokeWidth + 'rpx;border-radius:' + borderRadius + 'rpx;background-color:' + backgroundColor + ';'"
            ></view>
        </view>
        <view class="text l-text-class" v-if="showInfo && textPosition === 'right'" :style="'color:' + (textColor ? textColor : '') + ';margin-left:' + interval + 'rpx'">
            {{ percentClone }}%
        </view>
    </view>
</template>

<script>
import { px2rpx } from '../utils/util.js';
import validator from '../behaviors/validator';
export default {
    data() {
        return {
            _slotWidth: 0,
            _slotHeight: 0,
            _progressWidth: 0,
            _progressHeight: 0,
            _marginBottom: 0,
            marginLeft: 0,
            marginTop: 0,
            _useSlot: false,
            percentClone: ''
        };
    },

    externalClasses: ['l-class', 'l-text-class', 'l-active-class', 'l-background-class'],
    mixins: [validator],

    props: {
        percent: {
            type: Number,
            default: 0
        },
        strokeWidth: {
            type: Number,
            default: 12
        },
        borderRadius: {
            type: Number,
            default: 6
        },
        activeColor: {
            type: String
        },
        backgroundColor: {
            type: String,
            default: '#EBEBEB'
        },
        showInfo: {
            type: Boolean,
            default: false
        },
        textPosition: {
            type: String,
            default: 'right',
            options: ['left', 'right']
        },
        textColor: {
            type: String
        },
        interval: {
            type: Number,
            default: 20
        },
        active: {
            type: Boolean,
            default: false
        },
        duration: {
            type: Number,
            default: 30
        }
    },

    options: {
        multipleSlots: true,
        pureDataPattern: /^_/
    },

    watch: {
        _slotWidth__slotHeight__progressWidth__progressHeight_percent__useSlot: {
            deep: true,
            immediate: true,

            handler: function (newValue, oldValue) {
                const { t, e, r, i, s, a } = newValue;

                if (a) {
                    const a = -(e - i) / 2;
                    const o = ((r - t) * s) / 100;
                    this.setData({
                        marginTop: a,
                        marginLeft: o
                    });
                }
            }
        }
    },

    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },

    methods: {
        attached() {
            if (this.percentClone > 100) {
                this.setData({
                    percentClone: 100
                });
            }
            uni.createSelectorQuery()
                .in(this)
                .select('.slot')
                .boundingClientRect((t) => {
                    let e = this._useSlot;
                    if (t.width) {
                        e = true;
                    }
                    this.setData({
                        _useSlot: e,
                        _slotWidth: px2rpx(t.width),
                        _slotHeight: px2rpx(t.height)
                    });
                })
                .exec();
            uni.createSelectorQuery()
                .in(this)
                .select('.progress')
                .boundingClientRect((t) => {
                    this.setData({
                        _progressHeight: px2rpx(t.height),
                        _progressWidth: px2rpx(t.width)
                    });
                })
                .exec();
            const t = this.percentClone;
            let e = 0;
            if (this.active) {
                setInterval(() => {
                    if (e < t) {
                        e += 1;
                        this.setData({
                            percentClone: e
                        });
                    }
                }, this.duration);
            }
        }
    },

    created: function () {}
};
</script>
<style>
.container {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.progress {
    position: relative;
    width: 100%;
    transition: all 0.25s ease-in-out;
}
.percent {
    position: absolute;
    z-index: 1;
}
.active {
    background-color: #3963bc;
}
.text {
    color: #3963bc;
    font-size: 30rpx;
}
.background {
    position: absolute;
    width: 100%;
}
.header {
    position: absolute !important;
    z-index: 2;
}
.slot {
    position: absolute;
    z-index: 2;
}
</style>
